<template>
  <div>
    <a-card style="width: 100%;margin-bottom: 10px;">
      <a-form-model :layout="form.layout" :model="form" >
        <a-form-model-item label="菜单名称">
          <a-input v-model="form.queryParam.menuName" placeholder="" />
        </a-form-model-item>

        <a-form-model-item label="状态">
          <a-select default-value="" style="width: 120px" v-model="form.queryParam.status" >
            <a-select-option value="">
              全部
            </a-select-option>
            <a-select-option value="1">
              正常
            </a-select-option>
            <a-select-option value="2">
              停用
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item >
          <a-button type="primary" icon="search" @click="getPage">
            查询
          </a-button>
        </a-form-model-item>

        <a-form-model-item >
          <a-button type="primary" icon="plus" @click="doAdd">
            添加
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>


  <a-table
    :columns="table.columns"
    :data-source="table.data"
    :pagination="pagination"
    :scroll="{ y: 320 }"
    :loading="table.loading"
    rowKey="id"
    @change="tableChange"
  >
    <template slot="operation" slot-scope="text, record">

      <!--<a href="javascript:;" @click="review(record.id)">查看</a>-->
      <!--<a-divider type="vertical" />-->
      <a href="javascript:;" @click="edit(record.id)">编辑</a>
      <a-divider type="vertical" />
      <a-popconfirm
        v-if="table.data.length"
        title="您确定要删除?"
        @confirm="() => onDelete(record,text)"
      >
        <a href="javascript:;">删除</a>
      </a-popconfirm>

    </template>

    <template slot="iconCell" slot-scope="text, record">
      <svg-icon :icon-class="record.icon" />
    </template>

  </a-table>

    <!-- 添加 -->
    <add-menu ref="addMenu"></add-menu>
    <!-- 修改 -->
    <update-menu ref="updateMenuRef" ></update-menu>

  </div>
</template>

<script>
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      width: '8%',
    },
    {
      title: '菜单名称',
      dataIndex: 'menuName',
      width: '13%',
    },
    {
      title: '图标',
      dataIndex: 'icon',
      width: '8%',
      scopedSlots: { customRender: 'iconCell' },
    },
    {
      title: '请求地址',
      dataIndex: 'path',
      width: '20%',
    },
    {
      title: '类型',
      dataIndex: 'menuType',
      width: '8%',
      customRender:function (text, record, index){
        if (text =='M'){
          return "目录";
        }else if (text =='C'){
          return "菜单"
        }else if (text =='F'){
          return "按钮"
        }
        return "";
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '10%',
      customRender:function (text, record, index){
        if (text =='1'){
          return "正常";
        }else if (text =='2'){
          return "停用"
        }
        return "";
      },
    },
    {
      title: '是否隐藏',
      dataIndex: 'visible',
      width: '15%',
      customRender:function (text, record, index){
        if (text =='1'){
          return "显示";
        }else if (text =='2'){
          return "隐藏"
        }
        return "";
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '20%',
      scopedSlots: { customRender: 'operation' },
    },
  ];


  import {listMenu,delMenu} from "@/static/api/base/menu";
  import addMenu from "./addMenu";
  import updateMenu from "./updateMenu";

  export default {
      name: "list",
      components:{ addMenu,updateMenu},
      data(){
        return {
          //表格
          table: {
            data:undefined,
            columns: columns,
            loading: false,
          },
          pagination:{
            defaultCurrent: 1,    //默认当前页码
            defaultPageSize: 10,  //默认每页行数
            current:1,  //当前页数
            total:0,    //总行数
            pageSize: 10 ,
            showQuickJumper:true,
            pageSizeOptions:['5','10','15','20'],
            showSizeChanger:true,

          },
          //查询表单
          form: {
            layout: 'inline',
            queryParam:{
              menuName:'',
              status:undefined,
              pageNum:1,
              pageSize:10,
            },
            buttonItemLayout:'inline',
          },
          // updateMenuId:-1,
        }
      },
      created(){
            this.getPage();
      },
      methods:{
        onDelete(recode,text){
          delMenu(recode.id).then(response =>{
            debugger
            if (response.data.code =='2000'){
              this.msgSuccess("删除","删除成功");
              this.getPage();
            }
          })
        },
        getPage(){
          this.table.loading = true;
          listMenu(this.form.queryParam).then(response => {
            debugger
            let page = response.data;
            this.table.loading = false;
            this.table.data = page.list;
            this.pagination.current = page.pageNum;
            this.pagination.total = page.total;
            this.pagination.current = page.pageNum;
            this.pagination.pageSize = page.pageSize;
          })
        },
        doAdd(){
          this.$refs.addMenu.showAddMenu();
        },
        tableChange(pagination, filters, sorter, { currentDataSource }){
          debugger
          this.form.queryParam.pageNum = pagination.current;
          this.form.queryParam.pageSize = pagination.pageSize;
          this.getPage();
        },
        review(menuId){
          console.info(menuId)
        },
        edit(menuId){
          this.$refs.updateMenuRef.showUpdateMenu(menuId);
        }
      }
    }
</script>

<style scoped>
  .ant-card-body{
    padding: 18px;
  }

</style>
